<template>
  <div class="yxp">
    <div class="yxp-wordList-top">
      <div class="back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">{{title}}</div>
      <div class="yxp-top-r"></div>
    </div>
    <div class="yxp-wrap-grade">
      <div class="yxp-wrap-grade-item">
        <iframe :src="src" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
      </div>
    </div>
      <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
    import Timetips from "@/components/Timetips";
export default {
  name: 'wordGrade',
  components: {
    Timetips
  },
  data () {
    return {
      title: '结业报告',
      src: ''
    }
  },
  created () {
    if (this.$route.query.path) {
      let src = window.decodeURIComponent(this.$route.query.path)
      this.src = src.replace('from=1', 'from=2')
    }
  },
  mounted () {
    this.$nextTick(() => {
      window.scrollTo((document.documentElement.scrollWidth > document.documentElement.clientWidth ? document.documentElement.scrollWidth - document.documentElement.clientWidth : 0)/2,0)
    })
  },
  methods: {
    handleBack () {
      this.$router.push({
        path: '/wordRemember',
        query: {
          package_id: this.$route.query.package_id,
          title: this.$route.query.title
        }
      })
    }
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
}
</script>
<style lang="less" scoped>
.yxp-wrap-grade {
  width: 100%;
  // height: 100%;
  padding-top: 30px;
  padding-bottom: 26px;
  overflow: auto;
  &-item {
    width: 1400px;
    height: 946px;
    margin: 0 auto;
  }
}
</style>
